<template>
  <div class="app-container">
    <form-header />
    <el-form v-if="data !== null" ref="form" label-width="140px">
      <el-form-item label="申请人信息">
        <label class="item" style="margin-top: 3px;">认证类型：</label><el-input value="开通商户" clearable style="width:500px;" /><p /><p />
        <label class="item">机构名称：</label><el-input v-model="data.company.name" clearable style="width:500px;" /><p />
        <label class="item">机构地址：</label><el-input v-model="data.company.address" clearable style="width:500px;" /><p />
        <label class="item">负责人姓名：</label><el-input v-model="data.company.legalPerson" clearable style="width:500px;" /><label v-show="data.company.isAgreement === 0" class="item" style="color: red;width:200px;font-size:12px;margin-left:10px;">*负责人姓名与身份证姓名不符</label><p />
        <label class="item">负责人电话：</label><el-input v-model="data.serverPhone" clearable style="width:500px;" /><p />
        <label class="item">经营范围：</label><el-input v-model="data.categoryNames" clearable style="width:500px;" />
      </el-form-item>
      <el-form-item label="认证文件">
        <el-image
          style="width: 100px; height: 100px"
          :src="data.certificateImg"
          :preview-src-list="[data.certificateImg]"
        />
        <el-image
          style="width: 100px; height: 100px;margin-left:10px;"
          :src="data.idCardImg"
          :preview-src-list="[data.idCardImg]"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="certificationFail">认证不通过</el-button>
        <el-button type="success" @click="certificationSuccess">认证通过</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { merchantVerifyDetail, merchantVerifyStatus } from '@/api/account'
export default {
  name: 'MerchantVerifyDetail',
  data() {
    return {
      id: '',
      data: {
        id: '',
        company: {
          name: '',
          address: '',
          legalPerson: '',
          isAgreement: 1
        },
        serverPhone: '',
        categoryNames: '',
        certificateImg: '',
        idCardImg: ''
      }
    }
  },
  created() {
    this.id = this.$route.params['id']
    this.data.serverPhone = this.$route.params['serverPhone']
    this.data.categoryNames = this.$route.params['categoryNames']
    this.refresh()
  },
  mounted() {
  },
  methods: {
    refresh() {
      merchantVerifyDetail({ businessId: this.id }).then(response => {
        this.data.id = response.data.id

        if (response.data.company !== null) {
          this.data.company.name = response.data.company.name === null ? '' : response.data.company.name
          this.data.company.address = response.data.company.address === null ? '' : response.data.company.address
          this.data.company.legalPerson = response.data.company.legalPerson === null ? '' : response.data.company.legalPerson
          this.data.company.isAgreement = response.data.company.isAgreement === null ? 1 : response.data.company.isAgreement
        }

        this.data.certificateImg = response.data.certificateImg
        this.data.idCardImg = response.data.idCardImg
      })
    },
    certificationSuccess() {
      this.$confirm('是否确定审核通过？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.certificationSubmit('审核通过', 2)
      })
    },
    certificationFail() {
      this.$prompt('请输入审核失败理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.certificationSubmit(value, 3)
      })
    },
    certificationSubmit(reason, status) {
      merchantVerifyStatus({ id: this.data.id, result: reason, status: status }).then(response => {
        this.$message({ message: '操作成功', type: 'success' })
        this.$router.push({ name: 'MerchantVerifyList' })
      })
    }
  }
}
</script>

<style lang="scss">
.item {
  width: 100px;
  text-align: left;
  display:inline-block;
  font-weight: 400;
  height: 30px;
  line-height: 30px;
  color: #545454;
  font-size: 14px;
}
</style>
